<template>
  <span 
    class="tui-text"
    :class="[
      typeClass,
      sizeClass,
      weightClass,
      lineHeightClass,
      colorClass,
      disabledClass
    ]"
    :style="customStyle"
  >
    <slot></slot>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { TuiTextProps } from './types';

const props = withDefaults(defineProps<TuiTextProps>(), {
  type: 'default',
  size: 'default',
  weight: 'normal',
  lineHeight: 'md',
  color: '',
  disabled: false,
  style: () => ({})
});

// 计算类型样式
const typeClass = computed(() => props.type !== 'default' ? `tui-text--${props.type}` : '');

// 计算尺寸样式
const sizeClass = computed(() => props.size !== 'default' ? `tui-text--size-${props.size}` : '');

// 计算粗细样式
const weightClass = computed(() => {
  if (typeof props.weight === 'number') {
    return '';
  }
  return props.weight !== 'normal' ? `tui-text--weight-${props.weight}` : '';
});

// 计算行高样式
const lineHeightClass = computed(() => {
  if (typeof props.lineHeight === 'number') {
    return '';
  }
  return `tui-text--line-height-${props.lineHeight}`;
});

// 计算颜色样式
const colorClass = computed(() => props.color ? 'tui-text--custom-color' : '');

// 计算禁用样式
const disabledClass = computed(() => props.disabled ? 'tui-text--disabled' : '');

// 计算自定义样式
const customStyle = computed(() => {
  const style: Record<string, any> = { ...props.style };
  
  // 应用自定义颜色
  if (props.color) {
    style.color = props.color;
  }
  
  // 应用数值类型的字体粗细
  if (typeof props.weight === 'number') {
    style.fontWeight = props.weight;
  }
  
  // 应用数值类型的行高
  if (typeof props.lineHeight === 'number') {
    style.lineHeight = props.lineHeight;
  }
  
  return style;
});
</script>

<style lang="scss" scoped>
.tui-text {
  display: inline-block;
  transition: all 0.2s ease;
  
  // 类型样式
  &--default {
    color: var(--tui-color-text-primary);
  }
  
  &--primary {
    color: var(--tui-color-primary);
  }
  
  &--success {
    color: var(--tui-color-success);
  }
  
  &--info {
    color: var(--tui-color-info);
  }
  
  &--warning {
    color: var(--tui-color-warning);
  }
  
  &--danger {
    color: var(--tui-color-danger);
  }
  
  // 尺寸样式
  &--size-extra-small {
    font-size: var(--tui-font-size-extra-small, 12px);
  }
  
  &--size-small {
    font-size: var(--tui-font-size-small, 13px);
  }
  
  &--size-default {
    font-size: var(--tui-font-size-base, 14px);
  }
  
  &--size-medium {
    font-size: var(--tui-font-size-medium, 16px);
  }
  
  &--size-large {
    font-size: var(--tui-font-size-large, 18px);
  }
  
  &--size-extra-large {
    font-size: var(--tui-font-size-extra-large, 20px);
  }
  
  // 粗细样式
  &--weight-bold {
    font-weight: 700;
  }
  
  &--weight-bolder {
    font-weight: 900;
  }
  
  &--weight-lighter {
    font-weight: 300;
  }
  
  // 行高样式
  &--line-height-sm {
    line-height: 1.2;
  }
  
  &--line-height-md {
    line-height: 1.5;
  }
  
  &--line-height-lg {
    line-height: 1.8;
  }
  
  // 自定义颜色占位
  &--custom-color {
    // 颜色由内联style设置
  }
  
  // 禁用样式
  &--disabled {
    color: var(--tui-color-text-placeholder);
    cursor: not-allowed;
  }
}
</style>